<template>
  <div class="MacOrder-wrapper table-container">
    <table-cmp
      :query="query"
      :form-content="searchBody"
      :btn-content="btnBody"
      :loading="loading"
      @loadData="loadData"
      @btn-click="handleBtn"
      @select-change="handleSelectionChange"
    >   <el-table-column label="操作命令"  header-align="center" align="center" minWidth="200">
        <template slot-scope="scope">{{ scope.row.ipstr }}</template>
      </el-table-column>
      <el-table-column label="操作时间"  header-align="center" align="center"  width="400">
        <template slot-scope="scope">{{ scope.row.datetime }}</template>
      </el-table-column>

      <!-- <el-table-column label="操作" align="center" width="400" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-button type="danger" size="mini" @click="handleSee(row,3)">删除</el-button>
        </template>
      </el-table-column> -->
    </table-cmp>
  </div>
</template>
<script>
import { fetchList, addNewuser, putUser, deleteUser,updateUser } from '@/api/firewall';
import { MIX_Table } from '@/mixin/table';

export default {
  $$route: {
    meta: {
      title: '表格',
      icon: 'fa-history',
      sort: 0
    }
  },
  components: {},
  mixins: [MIX_Table],

  data: () => {
    return {
      centerDialogVisible: false,
      disabled:true,
      multiple: [],
      searchCfg: {
        queryPar: [ // 搜索框字段
          {
            fieldName: 'module', // 字段
            defaultValue: '请输入操作命令', // 输入框提示
            conditionType: 1, // 输入框类型
            itemWidth: 100, // 输入框宽度
            url: '',
            dataSource: '', // 选项[]
            displayName: '操作命令', // label显示
            dataSourceType: 1
          },

        ],
        menuOper: [ // 头部的新增按钮
          {
            id: 1,
            actionText: '重置',
            actionType: 2,
            remark: 'reset',
            class: ''
          }
        ]
      },
      api: fetchList,
      putOrnew: 1,
      dialogFormVisible: false,
      forms: {
        name: null,
        phoneNumber: null,
        coverUrl: null,           // 图片地址
        coverMediaId: null,       // 图片id
        realName: null,
        radio: '1'
      },

      formLabelWidth: '120px', // lable的width
      title: '新增用户' // 新增或者编辑标题
    };
  },
  computed: {},
  watch: {},
  // ------------------------------------------------------------------
  // pragma mark - Life Cycle(生命周期)
  // ------------------------------------------------------------------
  created() {
    this.createdInit();
  },
  mounted() {
    this.mountedInit();
  },

  methods: {
    // ------------------------------------------------------------------
    // pragma mark - inti(初始化行为)
    // ------------------------------------------------------------------
    createdInit() {
      this.loadData();
    },
    //是否启用用户
    handlePublish(data){
      console.log('时候')
      this.$confirm(`确定${data.isPublished ? "使用" : "禁用"}当前客服吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
          console.log('确定')
          let isPublish ={
            isPublished:data.isPublished,
            id :data.userID
          }
            putUser(isPublish).then(res => {
              if (res.success) {
                this.$message.success(
                  data.isPublished ? "启用成功" : "禁用成功"
                );
              } else {
                this.$message.error(
                  (data.isPublished ? "启用失败" : "禁用失败") + res.msg
                );
                data.isPublished = !data.isPublished;
              }
            })
            .catch(() => {
              data.isPublished = !data.isPublished;
            });
        })
        .catch(() => {
            console.log('取消')
          data.isPublished = !data.isPublished;
        });


    },
    mountedInit() {},

    loadData() {
      this.loadTableData(this.api);
      this.$nextTick(() => {
        console.log(this.query)
      })
    },
    handleSelectionChange(val) {
      this.multiple = val;
    },
    // 新增方法
    handleBtn(val) {
    console.log('val: ', val);
      if (val === 'reset') {
       this.query.pageInfo.page=1
       if(this.query&&this.query.module){
       this.query.module=""
       this.loadData();
       }
      }
    },
    // 表单提交事件
    submit(forms) {
      this.$refs[forms].validate(async valid => {
        if (valid) {
         this.onSubmit();
        } else {
          return false;
        }
      });
    },
    async onSubmit() {
      this.loading = true;

      const form = {
        phoneNumber: this.forms.phoneNumber,
        gender: this.forms.radio,
        realName: this.forms.realName,

        id: this.forms.id
      };
      if (this.putOrnew == 1) {
        addNewuser(form).then(res => {
          this.loading = false;
            if (res.success) {
              this.$message.success('添加成功！');
              this.loadData();
              this.dialogFormVisible = false;
            } else {
              this.$message.error(res.msg);
            }
          }).catch(() => {
            this.loading = false;
          });

      } else if (this.putOrnew == 2) {
       putUser(form).then(res => {
          this.loading = false;
            if (res.success) {
              this.$message.success('编辑成功！');
              this.loadData();
              this.dialogFormVisible = false;
            } else {
              this.$message.error(res.msg);
            }
          }).catch(() => {
            this.loading = false;
          });
      }
    },
    // 重置表单
    cancle() {
      // 重置数据
      // 清空校验
      this.$nextTick(() => {
        this.$refs['forms'].resetFields()
        this.forms = {
          name: null,
          phoneNumber: null,
          realName: null,
          radio: '1'
        }
      })
    },
    // 上传商家logo成功之后触发
    handleAvatarSuccess(res, file) {
      console.log(res);
      if (res.success) {
        this.$message.success("上传图片成功");
        this.forms.coverMediaId = res.data.id;
        this.forms.coverUrl = res.data.url;
      } else {
        this.$message.error("上传图片错误" + res.msg);
      }
    },
    // 上传商家logo之前触发
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      if (!isJPG) {
        this.$message.error("上传图片格式必须是jpg/jpeg/gif/png!");
      }
      return isJPG && isLt2M;
    },
    // 查看用户
    handleSee(val, value) {
      if (value === 1) {
        // 详情

      this.$router.push("/operation/index?PhoneNumber=" + val.phoneNumber);
        console.log(val.id)
      } else if (value === 2) {
        // 编辑
        this.disabled = true;
        this.title = '编辑用户';
        this.putOrnew = 2;
        this.dialogFormVisible = true;
        this.forms.realName = val.realName
        this.forms.name = val.account
        this.forms.phoneNumber = val.phoneNumber
        this.forms.id = val.userID
        val.gender == '1' ? this.forms.radio = '1' : this.forms.radio = '2'
      } else if (value === 3) {
        // 删除
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteUser(val.userID).then(res => {
            if (res.success) {
              this.$message.success('删除成功');
              this.loadData();
            } else {
              this.$message.error(res.msg);
            }
          });
        }).catch(() => {
        });
      }

      console.log(val)

    },

    closeDialog() {
      this.showOrderDetail = false;
    }
  }
};
</script>
<style scoped>
.avatar{
    width: 100px;
    height: 100px;
    display: block;
}
.avatar-uploader-icon{
      font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #d9d9d9;
}
.round {
  border-radius: 50%;
  background-color: #dddddd;
  line-height: 50px;
}
</style>
